{% extends "sidebar.html" %}
{% load static %}
{% load i18n %}

{% block title %}
    VPN
{%endblock%}

{% block head %}
<style>
    .mouse-hover:hover .mouse-hover-show {
        display: inline-block;
    }

    .mouse-hover:hover .mouse-hover-no-show {
        display: none;
    }

    .mouse-hover-no-show {
        display: inline-block;
    }

    .mouse-hover-show {
        display: none;
    }
</style>
{% endblock %}

{% block content %}
    <div class="bg-light">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                {% if active_service %}
                    <a class="nav-link" href="{% url 'servers:server-list' %}?service={{ active_service }}">云服务器</a>
                {% else %}
                    <a class="nav-link" href="{% url 'servers:server-list' %}">云服务器</a>
                {% endif %}
            </li>
            <li class="nav-item">
                {% if active_service %}
                    <a class="nav-link active" href="{% url 'vpn:service-vpn' active_service %}">VPN</a>
                {% else %}
                    <a class="nav-link disabled" href="#">VPN</a>
                {% endif %}
            </li>
        </ul>
    </div>
    {% if err %}
        <div class="alert alert-danger mt-2" role="alert">{{ err }}</div>
    {% else %}
    <table class="table table-hover table-borderless mt-2">
        <thead>
        <tr>
            <th>{% trans '用户名' %}</th>
            <th>{% trans 'VPN口令(双击修改)' %}</th>
            <th>{% trans '创建时间' %}</th>
            <th>{% trans '修改时间' %}</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>{{ vpn.username }}</td>
            <td class="vpn-password mouse-hover" data-service-id="{{ active_service }}">
                <span class="vpn-password-value mouse-hover-show" title="{% trans '双击修改' %}">{{ vpn.password }}</span>
                <span class="mouse-hover-no-show">******</span>
            </td>
            <td>{{ vpn.create_time|date:'Y-m-d H:i:s' }}</td>
            <td>{{ vpn.modified_time|date:'Y-m-d H:i:s' }}</td>
        </tr>
        </tbody>
    </table>
        {% if active_service %}
            <div>
                <p class="bg-light p-2">VPN相关文件下载</p>
                {% if vpn_config_file_url %}
                    <P>配置文件：<a href="{{ vpn_config_file_url }}" target="_blank">下载</a></P>
                {% endif %}
                {% if vpn_ca_file_url %}
                    <P>CA证书：<a href="{{ vpn_ca_file_url }}" target="_blank">下载</a></P>
                {% endif %}
            </div>
        {% endif %}
    {% endif %}
{% endblock %}

{% block sidebar-script %}
    <script type="text/javascript" src="{% static 'gosc/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'vpn/vpn.js' %}"></script>
{% endblock %}
